I am building a transcript based off user input and I was wondering if anyone could point me in the right direction of how I might be able to change the font-style of the strings stored in text_to_add_one and text_to_add_two.
if (build_transcript) {
var text_to_add_one = "<b>" + "YOU: " + "</b>" + `${transcript_you}`;
var text_to_add_two = "<b>" + "COMPUTER: " + "</b>" + `${transcript_computer}`;
document.getElementById("wordsIncluded").innerHTML += "<p>" + text_to_add_one + "</p>" + "<p>"+ text_to_add_two + "</p>" + "</br>";
build_transcript = false;
}
//wordsIncluded is a div
I have tried the approach below but it doesn't seem to work!
document.getElementById("wordsIncluded").innerHTML += "<p id="changeFont">" + text_to_add_one + "</p>" + "<p id="changeFont">" + text_to_add_two + "</p>" + "</br>";
CSS FILE
#changeFont {
font-style: 'Quicksand';
}
You should not use "<p id="changecolor">". As the code coloring shows, it does not matter part of the string. You should use "<p id=\"changecolor\">" or '<p id="changecolor">'
you need to use single quotes .
document.getElementById("wordsIncluded").innerHTML += '<p id="changeFont">' + text_to_add_one + '</p>' + '<p id="changeFont">' + text_to_add_two + '</p>' + '</br>';
Try some thing like below.
const transcript_you = "me";
const transcript_computer = "mac";
var text_to_add_one = `<b>YOU: </b>${transcript_you}`;
var text_to_add_two = `<b>COMPUTER: </b>${transcript_computer}`;
document.getElementById(
"wordsIncluded"
).innerHTML += `<p class="changeFont">${text_to_add_one}</p><p class="changeFont">${text_to_add_two}</p></br>`;p.changeFont {
color: red;
}<div id="wordsIncluded"></div>